<template>
  <!-- <v-touch @swiperight="onSwipeRight"> -->
  <v-touch @swiperight="onSwipeRight">
    <!-- vue会先渲染页面。而ajax是异步的，所以先做个判断，不要着急渲染页面 -->
    <div v-if="filmInfo">
      <!-- 吸顶效果 -->
      <detail-header v-top :title="filmInfo.name"></detail-header>

      <!-- 返回按钮 -->
      <div class="backBtn">
        <router-link to="/film" tag="span">
          <i class="iconfont icon-arrow-left-bold"></i>
        </router-link>
      </div>

      <!-- 海报图 -->
      <div :style="{ backgroundImage: 'url(' + filmInfo.poster + ')' }" style="height: 200px; background-size: cover; background-position: center"></div>

      <!-- 电影介绍 -->
      <div>
        <div>{{ filmInfo.name }}-{{ filmInfo.filmType.name }}</div>
        <div>{{ filmInfo.category }}</div>
        <div>{{ filmInfo.premiereAt | dateFilter }}上映</div>
        <div>
          <span>{{ filmInfo.nation }} </span>|
        </div>
        <!-- 详细信息 -->
        <div :class="isShow ? '' : 'synopsis'">{{ filmInfo.synopsis }}</div>
        <div style="text-align: center">
          <i
            class="iconfont"
            :class="isShow ? 'icon-arrow-up-bold' : 'icon-arrow-down-bold'"
            @click="isShow = !isShow"
          ></i>
        </div>
      </div>

      <h3>演职人员</h3>
      <detail-swiper :slide="4" swiperclass="swiper-actors">
        <div class="swiper-slide" v-for="(data, index) in filmInfo.actors" :key="index">
          <div><img :src="data.avatarAddress" /></div>
          <div style="text-align: center">
            <div>{{ data.name }}</div>
            <div>{{ data.role }}</div>
          </div>
        </div>
      </detail-swiper>

      <h3>剧照</h3>
      <detail-swiper :slide="3" swiperclass="swiper-photos">
        <div class="swiper-slide" v-for="(data, index) in filmInfo.photos" :key="index">
          <div><img :src="data" @click="clickImage(index)"></div>
        </div>
      </detail-swiper>
    </div>
  </v-touch>
</template>

<script>
import http from '@/util/http.js' // 别名 @ ==> src 下的绝对路径
import Vue from 'vue'
import moment from 'moment'
import detailSwiper from './detail/DetailSwiper.vue'
import detailHeader from './detail/DetailHeader.vue'
import { ImagePreview, Toast } from 'vant'
import VueTouch from 'vue-touch'

Vue.use(Toast)
Vue.use(VueTouch, { name: 'v-touch' })

// // 日期过滤器
Vue.filter('dateFilter', (date) => {
  return moment(date * 1000).format('YYYY-MM-DD')
})

Vue.directive('top', {
  inserted (el) {
    el.style.display = 'none'
    window.onscroll = () => {
      if ((document.body.scrollTop || document.documentElement.scrollTop) > 50) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  // 销毁指令
  unbind () {
    window.onscroll = null
  }
})

export default {
  components: {
    detailSwiper,
    detailHeader
  },
  data () {
    return {
      queryId: 0,
      filmInfo: null,
      isShow: false
    }
  },
  mounted () {
    // 数据请求之前，显示一个正在加载（loading）提示
    // 不可能给每一个页面都添加Toast，所有要进行封装
    // Toast.loading({
    //   message: '正在加载',
    //   forbidClick: true
    // })

    this.queryId = this.$route.query.id
    http({
      method: 'get',
      url: `/gateway?filmId=${this.queryId}&k=7619764`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then((res) => {
      this.filmInfo = res.data.data.film

      // 清空Toast
      // Toast.clear()
    })
  },
  methods: {
    clickImage (index) {
      ImagePreview({
        images: this.filmInfo.photos,
        startPosition: index,
        closeable: true,
        loop: false,
        closeIconPosition: 'top-left'
      })
    },
    onSwipeRight () {
      // console.log('right')
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.synopsis {
  height: 50px;
  overflow: hidden;
}
// 返回按钮
.backBtn {
  position: fixed;
  top: 12px;
  left: 5px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  i {
    font-size: 20px;
  }
}
</style>
